.steps {
    display: flex;
    font-family: PingFangSC;
    font-weight: 600;
    padding: 10px 10px 0 10px;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

.steps-items {
   position: fixed;
    width: 100px;
    height: 708px;
    margin-top: 16px;
    // position: fixed;
    zoom: 1;
    flex:0 0 100px;
}

.steps-items:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

.steps-item {
    width: 60px;
    margin: 0 auto;
}

.item-container {
    width: 60px;
    height: 60px;
    // line-height: 50px;
    background-color: #5AC139;
    border-radius: 50%;
    border: 5px solid #b7e6a8;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
    position: relative;
}

.item-container:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #000000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.item-container:active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
}

.steps-items .steps-item:last-child .item-line-bar {
    display: none;
}

.primary .item-container {
    color: rgba(153, 153, 153, 1);
    background-color: #E3EAEE;
    border-color: #ffffff70;
}

.item-container:hover {
    background: #62f532;
}

// 让子元素垂直,水平居中
.item {
    width: 50px;
    height: 50px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.item-line-bar {
    width: 4px;
    height: 36px;
    background: rgba(226, 233, 237, 1);
    position: relative;
    top: 0px;
    left: 28px;
}

.steps-content {
    margin-left: 100px !important;
    flex: 1; 
    margin-left: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 30px;
    text-align: center;
    min-height: 700px;
    // margin-bottom: 500px;
}

.steps-content::-webkit-scrollbar {
    display: none;
}

.card {
    // max-width:1074px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 20px;
}



.Relation{
  display: inline-block;
  color:rgba(102,102,102,1);
  span{
    display: inline-block;
    margin:0 10px;
  }
}

.steps-Introduction .card {
    background: rgba(246, 247, 208, 1);
    margin-bottom: 20px;
}

.instrument-title {
    position: relative;
}

h4 {
    height: 14px;
    font-size: 14px;
    color: rgba(34, 34, 34, 1);
    line-height: 14px;
}

.instrument-title a {
    position: absolute;
    top: 0px;
    right: 20px;
    width: 24px;
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(43, 98, 220, 1);
    line-height: 12px;
    text-decoration: none;
}

.card-body {
    text-align: left;
}

.card-body hr {
    margin: 0 auto;
}

.card-body p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 14px;
}

table {
    width: 100%;
    font-weight: 400;
}

.steps table tr td,
th {
    border: 1px solid rgba(212, 218, 228, 1);
    text-align: center;
    font-size: 12px;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
}

.steps table tr th {
    background: rgba(243, 245, 247, 1);
    color: rgba(136, 136, 136, 1);
}

.steps table tr td {
    background: rgba(255, 255, 255, 1);
    color: rgba(51, 51, 51, 1);
}

.steps table tr th.text-left,
.steps table tr td.text-left {
    text-align: left;
}

.steps table tr th.text-right,
.steps table tr td.text-right {
    text-align: right;
}

.filename{
  font-size:14px;
}
.img-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.video {
    background: url("./video@2x.png") no-repeat;
    background-size: 11px 10px;
    background-position: center;
}

.audio {
    background: url("./audio@2x.png") no-repeat;
    background-size: 14px 10px;
    background-position: center;
}

.img {
    background: url("./img@2x.png") no-repeat;
    background-size: 11px 10px;
    background-position: center;
}

.instrument {
    background: url("./instrument@2x.png") no-repeat;
    background-size: 9px 10px;
    background-position: center;
}

.instrument-title-header span {
    padding-right: 10px;
}

.currentPersonInfo{
  margin-top:10px;
}


.suorce-link span {
    vertical-align: middle;
}

.suorce-link a {
    font-size: 12px;
    color: rgba(43, 98, 220, 1);
}

// 基本信息
:host {
    display: block;
}

.open-close-container {
    overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap;
}


.badge {
    color: #fff;
    margin-left: 20px;
    height: 18px;
    border-radius: 9px;
}
.badge-done {
    background: #999999;
}
.badge-success {
    background: #5AC139;
}
.badge-danger {
  background: #ff4d4f;
}

.text-btn {
    margin-right: 15px;
}


//select样式
:host ::ng-deep .ant-select-selection.ant-select-selection--single {
  height: 32px;
  border: 1px solid rgba(212, 218, 229, 1);
  border-radius: 0;
  font-size: 14px;
  box-shadow: none;
  color:#222222;
  line-height: 28px;
  font-weight: 400;
  vertical-align: middle;
}

//select option样式
:host ::ng-deep {
  .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected.ant-select-dropdown-menu-item-active.ng-star-inserted {
      font-size: 12px !important;
  }
  .ant-select-dropdown-menu-item.ng-star-inserted {
      font-size: 12px !important;
  }
  .ant-select-dropdown-menu.ant-select-dropdown-menu-root.ant-select-dropdown-menu-vertical li {
      font-size: 12px !important;
  }
  .ant-select-dropdown-menu-item:hover {
      background-color: #e6f7ff;
      font-size: 12px;
  } 
} 

:host ::ng-deep .ant-select-selection__rendered {
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  border-radius: 0;
  .ant-select-selection__placeholder {
      font-size: 14px;
      color: rgba(34, 34, 34, 1);
      font-weight: 400;
  }
  .cdk-overlay-connected-position-bounding-box {
     
  }

}

.cdk-overlay-backdrop.nz-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
 
}

:host ::ng-deep .ant-calendar-picker-input.ant-input.ng-star-inserted {
  height: 32px;
  border: 1px solid rgba(212, 218, 229, 1);
  border-radius: 0;
  font-size: 14px;
  width:210px;
}

:host ::ng-deep .ant-calendar-picker-input.ant-input.ng-star-inserted::placeholder {
  color: rgba(34, 34, 34, 1);
  font-size: 14px;
  width:210px;
}





.hover-card-container {
    position: relative;
}

.hover-card {
    position: absolute;
    top: -50px;
    right: 10%;
    height: 120px;
    max-width: 600px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 9;
    display: none;
}

.hover-card::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    cursor: pointer;
}

.hover-card::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

.hover-card::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}

.hover-card-reload-btn {
    position: absolute;
    right: 5px;
    width: 25px;
    height: 25px;
    margin-top: 2px;
}

.hover-card-reload-btn .anticon {
    vertical-align: 0.2em;
    margin-top: .45em;
    font-size: 12px;
}

// .hover-card-container:hover .hover-card{
// 	display: block;
// }
.hover-card-steps-item {
    padding: 15px;
    display: inline-block;
    width: 180px;
    vertical-align: top;
}

.hover-card-steps-icon {
    height: 20px;
    width: 20px;
    border-radius: 25px;
    position: relative;
}
.hover-card-steps-item .success {
    background: #5AC139;
}
.hover-card-steps-item .primary {  
    background: #CFDEE6;
}

.hover-card-steps-icon .hover-card-steps-icon:hover {
    background: #5AC139;
}

.hover-card-steps-icon:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 21px;
    width: 160px;
    height: 4px;
    background: #E2E9ED;
    display: block;
}

.hover-card-steps-text p {
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    line-height: 12px;
}

.hover-card-steps-text p:first-child {
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
}

.hover-card-steps-item:last-child .hover-card-steps-icon:after {
    display: none;
}

.approval {
    text-align: left;
}

.approval .card-title {
    width: 156px;
    height: 12px;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(43, 98, 220, 1);
    line-height: 12px;
}

.expand-btn {
    position: fixed;
    left: 55%;
    bottom: 191px;
    z-index: 5000000;
    width: 40px;
    height: 28px;
    background: #EDF4F7;
    text-align: center;
    cursor: pointer;
}

.example {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    z-index: 10;
}

nz-spin {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    // right: 30px; 
}



 

.margin260{
  margin-right:260px;
}
.steps-right-fixed{
  width:250px;
  background: #f6f9fb;
  border-radius: 4px;
  height: 100%;
  margin-left: 10px;
  z-index: 10;
  margin-left: 10px;
  min-height: 100%;
  overflow: auto;
  height: 100vh;
  position: fixed;
  right: 30px;

   &::-webkit-scrollbar-track{
    width:1px;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    border-radius: 1px;
    background: #EDEDED;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #888;
  }
  &::-webkit-scrollbar-track:hover {
    /*滚动条里面轨道*/
    width:2px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
  }
  &::-webkit-scrollbar {
      width:2px;
  }

}



.steps-right{
  width: 250px;
  position: relative;
  flex: 0 0 250px;
  background:rgba(246,249,251,1);
  border-radius:4px;
  height:100%;
  margin-left:10px;
  min-height: 900px;
}

.steps-terminal{
  width: 100%;
  height:100%;
  padding:10px;
  // 头部H6
  .steps-head{
    margin-top:6px;
    width:112px;
    height:14px;
    font-size:14px;
    font-family:PingFangSC-Semibold,PingFangSC;
    font-weight:600;
    color:rgba(34,34,34,1);
    line-height:14px;
  }
}
:host ::ng-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header{
  padding: 12px 12px 12px 12px !important;
}
:host ::ng-deep .ant-collapse-content>.ant-collapse-content-box {
  padding: 0px;
}

.steps-matter{
  overflow: hidden;
  .steps-matter-card{
    height:210px;
    border-top: 1px solid rgba(212,218,228,1);

    .steps-matter-button-group{
      margin-top:10px;
      text-align: center;
      button{
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        border: 1px solid #d9d9d9;
        box-shadow: 0 2px 0 rgba(0,0,0,.015);
        cursor: pointer;
        transition: all .3s cubic-bezier(.645,.045,.355,1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        touch-action: manipulation;
      }
        .btn-success{
          margin:0 10px;
          width:60px;
          height:32px;
          background:rgba(68,166,245,1);
          border-radius:2px;
          border:1px solid rgba(30,158,222,1);
        }
        .btn-cancel{
          margin:0 10px;
          width:60px;
          height:32px;
          background:rgba(255,255,255,1);
          border-radius:2px;
          border:1px solid rgba(212,218,229,1);
        }
    }

  }
  box-shadow:0px 2px 8px 0px rgba(212,218,228,1);
  position: relative;
  width:234px;
  min-height:56px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(212,218,228,1);
  margin: 0 auto;
  margin-bottom: 50px;
  text-align: center;
  p.steps-matter-empty{
    height:56px;
    line-height: 56px !important;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(34,34,34,1);
    line-height:22px;
    margin-bottom:0;
  } 
  p.steps-matter-date{
    height:28px;
    font-size:16px;
    font-family:PingFangSC-Semibold,PingFangSC;
    font-weight:600;
    color:rgba(34,34,34,1);
    line-height:28px;
    margin:0;
  }
  p.steps-matter-text{
    height:28px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:28px;
    margin:0;
  }
  .steps-matter-caret{
    position: absolute;
    text-align: center;
    left: 190px;
    top: 18px;
    transition: transform .3s;
  }
  .steps-matter-caret.anticon-caret-down.open{
    transform: rotateX(180deg);
  }
} 

.livedescribe .describe, .bizFile .describe{
  font-weight:600;
  margin:6px 0;  
  text-align: left;
  font-weight:600;
  height:26px;
  line-height: 26px;
  padding:0 10px;
  background:rgba(236,247,255,1);
  font-family:PingFangSC-Regular,PingFang SC;
  color:rgba(34,34,34,1);
}


// 现场证据回传
.livedescribe{
  font-family:PingFangSC-Semibold,PingFang SC;
  font-size:14px;
  .problem{
    padding: 10px 10px;
    text-align: left;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(34,34,34,1);
    cursor: pointer;
  }

  .evidence{
    overflow: hidden;
  }

  .checkbox-rename{
    cursor: pointer;
  }
}
.bizFile {
  .docByFile{
    margin-bottom:30px;
  }
 
}


.file-checkbox{
  font-size:12px;
  font-family:PingFangSC-Regular,PingFangSC;
  font-weight:400;
  color:rgba(34,34,34,1);
  height:38px;
  line-height: 38px;
  padding-left: 8px;
  text-align: left;
  background:rgba(255,255,255,1);
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
}
.checked-blue{
  font-family:PingFangSC-Regular,PingFangSC;
  color:rgba(43,98,220,1) !important;
}
.checked-normal{
  overflow: hidden;
  height: 32px; 
  line-height: 32px !important;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size:12px;
  font-family:PingFangSC-Regular,PingFangSC;
  font-weight:400;
  color:rgba(34,34,34,1);
  line-height:12px;
  display: inline-block;
  vertical-align: middle;
  
}
.steps-file-fileName{
  width: 170px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  font-family: PingFangSC-Regular,PingFang SC;
  font-weight: 400;
  color: rgba(34,34,34,1);
}
.checkbox-div{
 border-top:1px solid rgba(212,218,228,1);
}

:host ::ng-deep .ant-collapse-header{
  background:rgba(236,247,255,1);
  padding:0 10px;
}

:host ::ng-deep .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content {
  background-color: transparent;
  border-top: 1px solid #dedede;
}


.steps-problem{ 
  margin-top: 35px;
  height: 130px;
  cursor: pointer;
  font-weight:400;
  .steps-problem-title{
    height:14px;
    font-size:12px;
    font-family:PingFangSC-Semibold,PingFangSC;
    font-weight:600;
    color:rgba(34,34,34,1);
    line-height:14px;
    border-bottom: 1px solid #D4DAE4; 
    height: 22px;
    line-height: 20px;
  }
  .steps-problem-item{
    display: -webkit-box;
    padding:2px;
    margin:8px 0; 
    padding: 0 5px;
    overflow: hidden;
    // white-space: nowrap;
    text-overflow: ellipsis;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(34,34,34,1);
    letter-spacing: 1.5px;
    line-height:18px;
    background-color:#fff;
    height:52px;
  }
  .steps-problem-content::-webkit-scrollbar-track{
    width:1px;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    border-radius: 1px;
    background: #EDEDED;
  }
  .steps-problem-content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 1px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #888;
  }
  .steps-problem-content::-webkit-scrollbar-track:hover {
    /*滚动条里面轨道*/
    width:2px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
  }
  ::-webkit-scrollbar {
      width:2px;
  }
  .steps-problem-content{

    height:130px;
    overflow-y: auto;
  }
}




.steps-terminal-foot{
    position: fixed;
    bottom: 0;
    width: 234px;
    background: #f6f9fb;
    height: 62px;
    line-height: 62px;
    padding-left: 10px;
    .steps-terminal-submit{
      width:52px;
      background:rgba(10,137,255,0.8);
      border-radius:2px;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      background-image: none;
      border: 1px solid #d9d9d9;
      box-shadow: 0 2px 0 rgba(0,0,0,.015);
      cursor: pointer;
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      touch-action: manipulation;
      height: 32px;
      font-size: 14px;
      color: #fff;
    }
    .steps-terminal-submit.disabled{
      background:#fff;
      opacity: .65;
      color:rgba(34,34,34,1);
    }
}
 




.renameBox{
    height:30px;
    text-align: center;
    line-height: 30px;
    margin-bottom:10px;
    .renameInput{
      box-sizing: border-box;
      margin: 0;
      padding: 4px 11px;
      font-variant: tabular-nums;
      list-style: none;
      font-feature-settings: 'tnum';
      position: relative;
      display: inline-block;
      width: 220px;
      height: 32px;
      color: rgba(0,0,0,.65);
      font-size: 14px;
      line-height: 1.5;
      background-color: #fff;
      background-image: none;
      border: 1px solid #d9d9d9;
      transition: all .3s;
      text-align: center;
    }
    .renameSpan{
      width: 220px;
    }
    .hidden{
      display: none;
    }
}

.a_download{
  color: #007bff !important;
}







